<template>
	<div ref="rankingContainer" v-resize="onSize" class="jk-table-ranking-container">
		<table class="width-100-percent" style="overflow:auto;border: none;table-layout: fixed;word-break: break-all; word-wrap: break-word;" border-collapse="collapse" border="0" cellPadding="0" cellSpacing="0">
			<thead style="background: #262F70;white-space: nowrap;font-size: 12px;overflow:auto;">
				<tr>
					<td
						v-for="(headerItem, headerIndex) in tableHeader"
						:key="headerIndex"
						class="jk-table-ranking-td"
						:style="{
							width: `${headerItem.width}px` || '',
							textAlign: headerItem.align || 'left'
						}"
						style="border: solid 1px #1A2F68"
					>
						<span>{{ headerItem.title }}</span>
					</td>
				</tr>
			</thead>
			<tbody class="width-100-percent">
				<tr
					v-for="(dataItem, dataIndex) in listData"
					:key="dataIndex"
					class="jk-table-ranking-tr"
					:style="{transition: dataItem.hasAni ? 'all .5s' : 'none', height: `${rowHeight}px`, overflow: `${dataItem.height ? '' : 'hidden'}`, padding: `${dataItem.height ? '2px 12px' : '0px 12px'}`}"
				>
					<td
						v-for="(headerItem, headerIndex) in tableHeader"
						:key="headerIndex"
						class="jk-table-ranking-td"
						:style="{
							width: `${headerItem.width}px` || '',
							textAlign: headerItem.align || 'left'
						}"
						style="border-bottom: solid 1px #180D37"
					>
						<div v-if="headerItem.key === 'priorityName'" style="width: 100%;height: 24px;border-radius: 6px;padding: 0 4px;" :style="setStyle(dataItem, headerItem.key)" class="flex-center">{{ dataItem[headerItem.key] }}</div>
						<jk-progress v-else-if="headerItem.key === 'percentage'" :show-text="false" :show-custom-text="true" :custom-text-style="{fontSize: '12px'}" text-color="#e8eaec" define-back-color="#121C54" type="circle" :percentage="dataItem.percentage || 0" :width="42"></jk-progress>
						<span v-else class="">{{ dataItem[headerItem.key] }}</span>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
</template>

<script>
    import domResizeMixin from '../../../../../mixins/dom-resize';
    import jkProgress from '../../../../jk-components/jk-progress';

    export default {
        name: 'JkRanking',
        components: {
            jkProgress
        },
        mixins: [domResizeMixin],
        props: {
            paramData: {
                type: Array,
                default() {
                    return [];
                }
            },
            type: {
                type: String,
                default: 'primary'
            },
            workshopId: {
                type: Number,
                default: null
            }
        },
        data() {
            return {
                rowHeight: 36,
                tableHeader: [
                    { key: 'code', title: '生产订单', width: 150, align: 'left' },
                    { key: 'percentage', title: '进度', width: 60, align: 'center' },
                    { key: 'priorityName', title: '优先级', width: 80, align: 'center' },
                    { key: 'productName', title: '生产品种', width: 160, align: 'left' },
                    { key: 'batchCode', title: '生产批号', width: 140, align: 'left' },
                    { key: 'orderQty', title: '订单量(吨)', width: 70, align: 'right' },
                    { key: 'xsCompleteQty', title: '完成量(吨)', width: 90, align: 'right' }
                ],
                levelConfig: {
                    '非常紧急': {
                        bgColor: '#432854',
                        color: '#ed4014'
                    },
                    '紧急': {
                        bgColor: '#2E2D4D',
                        color: '#ff9900'
                    },
                    '正常': {
                        bgColor: '#133257',
                        color: '#19be6b'
                    }
                },
                cpData: [],
                timerOut: {},
                interVal: {},
                listData: [],
                example: null,
                borderColor: '#c5c8ce'
            };
        },
        methods: {
            setStyle(item, key) {
                return {
                    background: this.levelConfig[item[key]].bgColor,
                    color: this.levelConfig[item[key]].color
                };
            },
            onSize() {
                this.run();
            },
            run() {
                this.$nextTick(() => {
                    // 超出容器高度时才滚动
                    if (this.$refs.rankingContainer.clientHeight < this.listData.length * this.rowHeight) {
                        let item = {};
                        clearInterval(this.interVal);
                        this.interVal = setInterval(() => {
                            if (this.listData.length) {
                                this.$set(this.listData[0], 'hasAni', true);
                                this.$set(this.listData[0], 'height', 0);
                                clearTimeout(this.timerOut);
                                this.timerOut = setTimeout(() => {
                                    item = JSON.parse(JSON.stringify(this.listData))[0];
                                    item.height = this.rowHeight;
                                    item.hasAni = false;
                                    this.listData.push(item);
                                    this.listData.splice(0, 1);
                                }, 1000);
                            }
                        }, 2000);
                    } else {
                        clearInterval(this.interVal);
                        if (this.listData.length) {
                            this.listData = JSON.parse(JSON.stringify(this.cpData));
                            this.$set(this.listData[0], 'hasAni', false);
                            this.$set(this.listData[0], 'height', this.rowHeight);
                        }
                    }
                });
            }
        },
        mounted() {
        },
        beforeDestroy() {
            clearInterval(this.interVal);
            clearInterval(this.timerOut);
        },
        watch: {
            paramData: {
                handler(newVal) {
                    this.listData = [];
                    this.listData = newVal ? newVal.map((x, idx) => {
                        return {
                            hasAni: false,
                            height: this.rowHeight,
                            noNum: idx + 1,
                            ...x
                        };
                    }) : [];
                    this.cpData = JSON.parse(JSON.stringify(this.listData));
                    this.run();
                },
                deep: true,
                immediate: true
            }
        }
    };
</script>

<style scoped lang="scss">
    $border_color: 'red';
    .jk-table-ranking-container {
        width: 100%;
        height: 100%;
        color: #c5c8ce;
        overflow-y: hidden;
        overflow-x: auto;
        .jk-table-ranking-tr {
            width: 100%;
            padding: 2px 12px;
            box-sizing: border-box;
            font-size: 13px;
            color: #c5c8ce;
            background: #122054;
        }
        .jk-table-ranking-td {
            height: 32px;
            padding: 4px 6px;
            font-size: 13px;
            //white-space: nowrap;
            //overflow: hidden;
            //text-overflow: ellipsis;
        }
    }
    // 滚动条样式
    .jk-table-ranking-container::-webkit-scrollbar{
        width: 6px;
        height: 7px;
    }
    .jk-table-ranking-container::-webkit-scrollbar-thumb:hover{
        width: 6px;
        height: 7px;
        cursor: pointer;
        background-color: #114896;
    }
    .jk-table-ranking-container::-webkit-scrollbar-thumb{
        border-radius: 1em;
        background-color: #1A2F68;
    }
    .jk-table-ranking-container::-webkit-scrollbar-track{
        border-radius: 1em;
        background-color: rgba(50,50,50,.1);
    }
</style>
